
<style>
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}
.container {
  /* 使用 grid 网格布局 */
  display: grid;
  /* 显示网格列宽度设置，让网格自动创建很多列来填满整个容器 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /*  如果内容尺寸大于 100 像素则会根据内容自动调整。 */
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}
</style>
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>
